<template>
  <q-layout view="hHh Lpr lFf">
    <q-header
      :elevated="$q.dark.isActive ? false : true"
      class="bg-primary shadow-1"
      :class="$q.platform.is.android ? 'h-100px flex flex-items-end' : ''"
    >
      <q-toolbar>
        <q-btn
          flat
          dense
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer"
        />

        <q-toolbar-title>
          <div class="toolbar-title-text absolute-center">
            <q-icon name="savings" />
            <span>Moneyballs App</span>
          </div>
        </q-toolbar-title>
        <q-btn
          v-if="$route.fullPath === '/' && enteriesStore.entriesList.length"
          flat
          no-caps
          dense
          :label="!enteriesStore.options.sort ? '排序' : '完成'"
          @click="toggleSort"
        />
      </q-toolbar>
    </q-header>

    <q-drawer
      class="bg-primary text-white b-r-none"
      :class="$q.platform.is.android ? 'pt-80px' : ''"
      style="border-right: none"
      v-model="leftDrawerOpen"
      :width="220"
      :breakpoint="767"
      show-if-above
      :bordered="$q.platform.is.mobile ? false : true"
    >
      <q-item-label header> 菜单项 </q-item-label>
      <q-list class="bg-primary text-white">
        <NavlLink
          class="bg-primary text-white"
          v-for="link in linksList"
          :key="link.title"
          v-bind="link"
        />

        <q-item
          v-if="$q.platform.is.electron"
          @click="exitApp"
          clickable
          class="text-white absolute-bottom"
        >
          <q-item-section avatar>
            <q-icon name="power_settings_new" />
          </q-item-section>

          <q-item-section>
            <q-item-label>退出</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import NavlLink, { type NavLinkProps } from "components/NavLink.vue";
import { useEntriesStore } from "stores/storeEntries";

defineOptions({
  name: "MainLayout",
});

const $q = useQuasar();
const enteriesStore = useEntriesStore();

const linksList: NavLinkProps[] = [
  {
    title: "主页",
    icon: "savings",
    link: "/",
  },
  {
    title: "设置",
    icon: "settings",
    link: "/settings",
  },
];

const leftDrawerOpen = ref(false);

//切换排序
const toggleSort = () => {
  enteriesStore.options.sort = !enteriesStore.options.sort;
};

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}

// 退出exitApp
const exitApp = () => {
  $q.dialog({
    title: "退出",
    message: "确定退出应用吗？",
    cancel: {
      label: "取消",
      color: "primary",
    },
    ok: {
      label: "确定",
      color: "negative",
    },
    persistent: true,
  }).onOk(() => {
    // 删除条目
    if ($q.platform.is.electron) {
      window.ipcRenderer.send("quit-app");
    }
  });
};
</script>
